import React from 'react';
import G6 from '@antv/g6';
import insertCss from 'insert-css';
import {initNodes} from "components/flowChartDetailNew/base";

class FlowChartDetail extends React.Component {

  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props);
    initNodes();
  }

  componentDidMount() {
    insertCss(`
    .g6-tooltip {
      border-radius: 6px;
      font-size: 12px;
      color: #fff;
      background-color: #000;
      padding: 2px 8px;
      text-align: center;
    }`
    );

    const { data } = this.props;
/*    const dataProps = {...data};

    if(dataProps.modelId){
      dataProps.nodes = dataProps.nodes.map(node => {
        const nodeData = {};
        nodeData.id = node.id;
        nodeData.name = node.label;
        nodeData.dataType = node.type;
        nodeData.type = 'task-node';
        // nodeData.type = node.shape;
        nodeData.datashape = node.shape;
        nodeData.size = node.size;
        nodeData.style = node.style;
        nodeData.x = node.x;
        nodeData.y = node.y;
        nodeData.model = node.model;
        return nodeData;
      });
    } */
    const dataProps ={
      nodes: [
        {
          id: "node1",
          label: "Circle1",
          type: "task-node",
          x: 150,
          y: 150,
        },
        {
          id: "node2",
          label: "Circle2",
          type: "EndNoneEvent",
          x: 400,
          y: 150,
        },
      ],
      edges: [
        {
          source: "node1",
          target: "node2",
        },
      ],
    };
    const container = document.getElementById('flowChart');
    const width = container.scrollWidth;
    const height = container.scrollHeight || 340;

    const graph = new G6.Graph({
      container: 'flowChart',
      width,
      height,
      layout: {
        type: 'dagre',
        rankdir: 'LR',
        align: 'DL',
        nodesepFunc: () => 40,
        ranksepFunc: () => 20,
        preventOverlap: true,
      },
      defaultNode: {
        // type: 'task-node',
      },
      defaultEdge: {
        type: 'polyline',
        style: {
          radius: 20,
          offset: 45,
          endArrow: true,
          lineWidth: 2,
          stroke: '#C2C8D5',
        },
      },
      nodeStateStyles: {
        selected: {
          stroke: '#d9d9d9',
          fill: '#5394ef',
        },
      },
      modes: {
        default: [
          'drag-canvas',
          'zoom-canvas',
          'click-select',
          {
            type: 'tooltip',
            formatText(model) {

              const text = [];
              text.push(`名称：${model.name}<br>响应人：<br>响应时间`);
              return text.join('\n');
            },
            offset: 30,
          },
        ],
      },
      fitView: true,
    });
    graph.data(dataProps);
    graph.render();
    // graph.zoom(0.8);
    if (typeof window !== 'undefined')
      window.onresize = () => {
        if (!graph || graph.get('destroyed')) return;
        if (!container || !container.scrollWidth || !container.scrollHeight) return;
        graph.changeSize(container.scrollWidth, container.scrollHeight);
      };
  }


  render() {
    return <div id='flowChart' style={{minheight:340}} ref={this.getContainer} />;
  }
}

export default FlowChartDetail;
